import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import {
    WriterWrap,
    WriterHead,
    WriterItem,
    WriterSwitch
} from '../style'

class Writer extends PureComponent {
    render() { 
        const { list, handleSwtichWriter, page, totalPage } = this.props
        const listJs = list.toJS()
        const newListItem = []
        if(listJs.length){
            for(let i=(page-1)*5; i< Math.min(page*5, listJs.length); i++ ){
                newListItem.push(
                    <WriterItem key={listJs[i]['id']}>
                            <img className="pic" src={listJs[i]['imgUrl']} alt="" />
                            <div className="content">
                                <h3 className="title">{listJs[i]['name']}</h3>
                                <span className="notice">+关注</span>
                            </div>
                            <p className="desc">{listJs[i]['desc']}</p>
                    </WriterItem>
                )
            }
        }
        return ( 
            <WriterWrap>
                <WriterHead>
                    推荐作者
                    <WriterSwitch onClick={() => handleSwtichWriter(page, totalPage, this.spinIcon)}>
                            <i ref={(icon) => this.spinIcon = icon} className="iconfont spin">&#xe851;</i>
                            换一批
                    </WriterSwitch>
                </WriterHead>
                {
                    newListItem
                }
               
            </WriterWrap>
         );
    }
}

const mapState = (state) => ({
    list: state.getIn(['home', 'writerList']),
    page: state.getIn(['home', 'writerListPage']),
    totalPage: state.getIn(['home', 'writerListTotalPage']),
})

const mapDispatch = (dispatch) => ({
    handleSwtichWriter(page, totalPage, spin) {
        console.log(page, totalPage)
        let originAngle = spin.style.transform.replace(/[^0-9]/gi, '')
        if (originAngle) {
            originAngle = parseInt(originAngle, 10)
        } else {
            originAngle = 0
        }
        spin.style.transform = `rotate(${originAngle + 360}deg)`
    }
}) 
export default connect(mapState, mapDispatch)(Writer);